import React, { Component, cloneElement } from 'react'
import { render } from 'react-dom'
import { Route, IndexRoute, Router, hashHistory } from 'react-router'
import {
  Homepage,
  AccountPage,
  ProfilePage,
  AccountImprove,
  Misrouting,
} from './components/ui'
import './statics/less/app'

class App extends Component {
  render() {
    const { children } = this.props
    return (
      <div className={`rt-app-container`}>{cloneElement(children)}</div>
    )
  }
}

const routes = (
  <Route path="/" component={App}>
    <IndexRoute component={Homepage} />
    <Route path="/account" component={AccountPage} />
    <Route path="/profile" component={ProfilePage} />
    <Route path="/account/improve" component={AccountImprove} />
    <Route path="*" component={Misrouting} />
  </Route>
)

render(
  <Router history={hashHistory} routes={routes} />,
  document.getElementById('app')
)